$grey: #bcc1d1;
$blackBg: #141827;
$greyBg: #333952;

$left-bg: $greyBg;
$left-text: $grey;
$left-active-text: $gold;
$left-active-bg: $blackBg;

$left-statistics-bg: #ff5722;
$left-statistics-text: #fff;

$leftTabWidth: 22%;
$rightWidth: 78%;

$headerHeight: 50px;
$footHeight: 60px;

.page {
  color: $color-base-white;
}

// 多选
.multi-select {
  position: relative;
  margin-top: 2px;
  padding: 2px 12px;
  font-size: $font-size-xs;
  text-align: center;
  border: 1px solid $gold;
  color: $gold;
}

.header {
  height: $headerHeight;
  background: $color-primary-modal-bg;
  @include is-flex(row, space-between, center, nowrap);
  padding: 0 10px;
  color: $gold;
  .room {
    color: $white;
  }
}

.scroll-container {
  position: relative;
  height: calc(100vh - #{$headerHeight} - #{$footHeight});
  overflow: hidden;
}

.left-tab,
.goods-container {
  // top: $headerHeight;
  // bottom: $footHeight;
  // height: calc(100% - #{$headerHeight} - #{$footHeight});

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

// 左侧 类目侧边栏
.left-tab {
  width: $leftTabWidth;
  left: 0;
  background-color: $left-bg; // 左侧边栏背景颜色
  color: $left-text; // 左侧边栏字体颜色

  // 商品类目 - 单行
  .left-tab-item {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;

    &:last-child {
      margin-bottom: 200upx;
    }

    // 左侧侧边栏被选中后的样式
    &.active {
      transition: all 0.2s;
      height: 52px;
      background-color: $left-active-bg;
      color: $left-active-text;
    }

    .left-tab-item-text {
      width: 100%;
      font-size: $font-size-xxs;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-align: center;
      padding: 0 10px;
    }
  }
}

// 右侧内容侧边栏
$rightPadding: 15px;
.goods-container {
  left: $leftTabWidth;
  width: calc(#{$rightWidth} - #{$rightPadding} - #{$rightPadding});
  padding: $rightPadding $rightPadding 0 $rightPadding;
  box-sizing: content-box;
  color: $grey;

  .goods-tab-item-name {
    height: 35px;
    line-height: 35px;
    margin-bottom: 15px;
    background: $blackBg;
    font-size: $font-size-lg;
    position: sticky;
    top: 0;
    z-index: 18;
  }
}

// 商品容器
.goods-item-box {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;

  height: 75px;
  margin-bottom: 20px;

  &:last-child {
    border-bottom: 0;
  }

  .goods-item-img {
    background: $imgBg;
    width: 77px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
  }

  .goods-item-content {
    height: 100%;
    width: 75%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    position: relative;
    justify-content: space-between;

    .goods-item-title {
      width: 100%;
    }

    .goods-item-bottom {
      @include is-flex(row, space-between, center, nowrap);
      // 加减操作组件
      ::v-deep .hx-numbox-item {
        width: 22px;
        height: 22px;
      }
    }

    .goods-item-price {
      font-weight: bold;
      display: flex;
      align-items: center;
      color: $gold;
      font-size: 30rpx;
    }
  }
}
